<template>
  <el-form>
    <el-form-item v-for="(item, i) in data" :label="item.statsTitle" :prop="item.stastsId" :key="i">
      <div class="checkbox-list">
        <template v-for="(option, index) in item.children" :key="index">
          <div
            v-if="!option.children.length"
            :class="isChecked(item, option) ? 'active item' : 'item'"
            @click="checked(item, option)"
          >
            A{{ option.statsTitle }}
            <img src="@/assets/images/active.png" alt="" />
          </div>
          <div v-else class="select-box">
            B{{ option.statsTitle }}
            <el-select
              style="width: 130px"
              v-model="selectValue[option.stastsId]"
              :multiple-limit="option.stasType == 3 ? 0 : 1"
              clearable
              @remove-tag="delSelect(item, option, index)"
              @clear="clearSelect(item, option)"
              :disabled="edit"
            >
              <el-option
                v-for="(i, _index) in option.children"
                :key="_index"
                :value="i.stastsId"
                :label="i.statsTitle"
                @click="selectChange(item, option, i, option.stasType != 3)"
              >
              </el-option>
            </el-select>
          </div>
        </template>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {
      return {};
    }
  },
  form: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["update:form"]);
const selectValue = ref({});
const forms = computed({
  set: value => emit("update:form", value),
  get: () => props.form
});
/**
 * 选中
 */
const checked = (item, option) => {
  console.log("SSSSSSS", item, option);
  if (!forms.value.some(v => v.stastsId == item.stastsId)) {
    console.log(1111, forms.value);
    forms.value.push({
      stastsId: item.stastsId,
      stastsName: item.statsTitle,
      stastsVal: [option.statsTitle],
      stastsValId: [option.stastsId],
      stasType: item.stasType,
      isCommon: item.isCommon
    });
  } else {
    console.log(2222222, forms.value);
    for (let v of forms.value) {
      if (v.stastsId == item.stastsId) {
        if (v.stastsValId.some(val => val == option.stastsId)) {
          v.stastsValId = v.stastsValId.filter(val => val != option.stastsId);
        } else {
          if (option.stasType == 3) {
            v.stastsVal.push(item.statsTitle);
            v.stastsValId.push(item.stastsId);
          } else {
            v.stastsVal = [option.statsTitle];
            v.stastsValId = [option.stastsId];
          }
        }
      }
    }
  }
};
/**
 * 是否选中
 */
const isChecked = (item, option) => {
  for (let v of forms.value) {
    if (v.stastsId == item.stastsId) {
      return v.stastsValId.some(val => val == option.stastsId);
    }
  }
};
/**
 * 选择三级框
 */
const selectChange = (item, option, i, isDel) => {
  if (isDel) {
    for (let v of forms.value) {
      if (v.stastsId == item.stastsId) {
        v.stastsValId = v.stastsValId.filter(val => val != option.stastsId);
      }
    }
    for (let v of item.children) {
      if (v.stastsId != option.stastsId) {
        delete selectValue.value[v.stastsId];
      }
    }
  }
  checked(item, i);
};
/**
 * 清空选择框
 */
const clearSelect = (item, option) => {
  for (let v of forms.value) {
    if (v.stastsId == item.stastsId) {
      v.stastsValId = v.stastsValId.filter(val => val != option.stastsId);
      v.stastsVal = v.stastsVal.filter(val => val != option.statsTitle);
    }
  }
};
</script>

<style lang="scss" scoped>
$border: 1px solid #e2e8f0;
$topic: #007dff;

.checkbox-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  > .item {
    height: 26px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    border: 1px solid transparent;
    line-height: 26px;
    padding: 0 16px;
    cursor: pointer;
    flex: 1;
    white-space: nowrap;

    > img {
      display: none;
    }
  }

  .select-box {
    display: flex;
    white-space: nowrap;
    gap: 10px;
  }

  .active {
    border: 1px solid $topic;
    position: relative;
    overflow: hidden;

    > img {
      display: block;
      width: 19px;
      height: 18px;
      position: absolute;
      right: -1px;
      bottom: -1px;
    }
  }
}
</style>
